<template>
  <a-card :bordered="false" size="small">
    <a-form-model :model='formData' :rules='rules' ref='myForm' :style="{width:'100%'}" layout='vertical'
        v-bind='{}' :colon='true' labelAlign='right'>
      <a-row style="height: 100%">
        <a-col :span="24">
          <a-row :gutter="5">
            <a-col :span="4">
              <a-form-model-item label="主机地址" prop="host" v-bind="{}">
                <a-input
                  v-model="formData.host"
                  placeholder=""
                  :allowClear="true"
                  size="default"
                  :disabled="false"
                ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="4">
              <a-form-model-item label="用户名" prop="userName" v-bind="{}">
                <a-input
                  v-model="formData.userName"
                  placeholder=""
                  :allowClear="true"
                  size="default"
                  :disabled="false"
                ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="4">
              <a-form-model-item label="密码" prop="password" v-bind="{}">
                <a-input-password
                  v-model="formData.password"
                  autocomplete="new-password"
                  placeholder=""
                  size="default"
                  :disabled="false"
                ></a-input-password>
              </a-form-model-item>
            </a-col>
            <a-col :span="4">
              <a-form-model-item label="数据库" prop="database" v-bind="{}">
                <a-input
                  v-model="formData.database"
                  placeholder=""
                  :allowClear="true"
                  size="default"
                  :disabled="false"
                ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="4">
              <a-form-model-item label="端口" prop="port" v-bind="{}">
                <a-input
                  v-model="formData.port"
                  placeholder=""
                  :allowClear="true"
                  size="default"
                  :disabled="false"
                ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="4">
              <a-form-model-item>
                <a-button
                  style="margin-top: 29px;"
                  :loading="confirmLoading"
                  type="primary"
                  @click="handleOk"
                >
                  配置数据源
                </a-button>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </a-form-model>
  </a-card>
</template>

<script>
import storage from 'store'
import { testConnection } from '@/api/generator.js'
export default {
  components: {},
  props: [],
  data() {
    return {
      confirmLoading: false,
      defaultFormData: {
        host: '',
        userName: '',
        password: '',
        database: '',
        port: '3306'
      },
      formData: {},
      rules: {
        host: [
          {
            required: true,
            message: '主机地址不能为空',
            trigger: 'blur'
          },
          {
            max: 255,
            message: '主机地址最大长度不能大于255',
            trigger: 'blur'
          }
        ],
        userName: [
          {
            required: true,
            message: '用户名不能为空',
            trigger: 'blur'
          },
          {
            max: 255,
            message: '用户名最大长度不能大于255',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '密码不能为空',
            trigger: 'blur'
          },
          {
            max: 255,
            message: '密码最大长度不能大于255',
            trigger: 'blur'
          }
        ],
        database: [
          {
            required: true,
            message: '数据库不能为空',
            trigger: 'blur'
          },
          {
            max: 255,
            message: '数据库最大长度不能大于255',
            trigger: 'blur'
          }
        ],
        port: [
          {
            required: true,
            message: '端口不能为空',
            trigger: 'blur'
          },
          {
            max: 255,
            message: '端口最大长度不能大于255',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.formData = Object.assign({}, this.defaultFormData)
    const data = storage.get('datasource')
    if (data) {
      this.formData = Object.assign({}, data)
    }
  },
  methods: {
    handleOk() {
      this.confirmLoading = true
      this.$refs['myForm'].validate((valid) => {
        if (!valid) {
          console.log('error')
          this.confirmLoading = false
        } else {
          // TODO 提交表单
          testConnection(this.formData).then((res) => {
            if (res.code === 1) {
              // this.$success({
              //   title: '提示',
              //   content: '连接成功'
              // })
              // TODO 提交表单
              storage.set('datasource', this.formData)
              this.$emit('success')
            }
            this.confirmLoading = false
          })
        }
      })
    },
    onReset() {
      this.$refs['myForm'].resetFields()
      this.hideModal()
    }
  }
}
</script>
<style scoped lang="less">
/*复选框样式*/
.ant-checkbox-wrapper + .ant-checkbox-wrapper {
  margin-left: 0px;
}
</style>
